<template>
  <div class="box">
      <Header title="我的行程"></Header>
      <div class="my-trip-list">
        <div class="my-trip-title">
          <div>
            <i>D1</i>
            <span>8月1日</span>
          </div>
          <p>清空当日行程</p>
        </div>
        <van-tabs v-model="active" color="#0FD2B2">
          <van-tab title="标准">
            <div class="trip-box">
              <div class="trip-item-box">
                <div class="left-box">
                  <img class="scenic-img" src="@/assets/images/scenicMarker.png" alt="">
                  <span>中岳景区(嵩山)</span>
                </div>
                <div class="right-box">
                  <img class="arrow-img" src="@/assets/images/icon-down.png" alt="">
                  <img class="del-img" src="@/assets/images/icon-del.png" alt="">
                </div>
              </div>
              <div class="circle-box">
                <div></div>
                <div></div>
              </div>
            </div>
            <div class="trip-distance">
              <img src="@/assets/images/icon-car.png" alt="">
              <span>14.58km</span>
            </div>
            <div class="trip-box">
              <div class="trip-item-box">
                <div class="left-box">
                  <img class="scenic-img" src="@/assets/images/scenicMarker.png" alt="">
                  <span>中岳景区(嵩山)</span>
                </div>
                <div class="right-box">
                  <img class="arrow-img" src="@/assets/images/icon-up.png" alt="">
                  <img class="del-img" src="@/assets/images/icon-del.png" alt="">
                </div>
              </div>
              <div class="circle-box">
                <div></div>
                <div></div>
              </div>
            </div>
            <div class="trip-distance">
              <img src="@/assets/images/icon-hotel.png" alt="">
              <p>今天还没安排住宿，请点击添加</p>
            </div>
          </van-tab>
          <van-tab title="地图">
            <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true">
            <bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolylinePath"></bm-polyline>
          </baidu-map>
          </van-tab>
        </van-tabs>
      </div>
  </div>
</template>

<script>
import Header from '@/components/Header/Header'
export default {
    name:'MyTrip',
    components:{Header},
    data(){
      return{
        active:0,
        polylinePath: [
          {lng: 116.404, lat: 39.915},
          {lng: 116.405, lat: 39.920},
          {lng: 116.423493, lat: 39.907445}
        ]
      }
    },
    methods: {
    updatePolylinePath (e) {
      this.polylinePath = e.target.getPath()
    },
    addPolylinePoint () {
      this.polylinePath.push({lng: 116.404, lat: 39.915})
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  padding-left:0;
  padding-right:0;
}
.my-trip-list{
  .my-trip-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:30/7.5vw;
    height: 135/7.5vw;
    background-color: #F7F6F5;
    i{
        display: inline-block;
        width: 70/7.5vw;
        height: 70/7.5vw;
        margin-right:20/7.5vw;
        border-radius: 50%;
        border: 3/7.5vw solid #0FD2B2;
        color: #0FD2B2;
        text-align: center;
        line-height: 70/7.5vw;
        font-size: 32/7.5vw;
    }
    span{
        font-size: 36/7.5vw;
        color: #313233;
    }
    p{
        font-size: 28/7.5vw;
        color: #636366;
    }
  }
  .trip-box{
    .trip-item-box{
      padding:80/7.5vw 30/7.5vw 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div{
        display: flex;
        align-items: center;
        font-size: 32/7.5vw;
        color: #636366;
        font-weight: bold;
        .scenic-img{
          width:51/7.5vw;
          margin-right:20/7.5vw;
        }
        .arrow-img{
          width:30/7.5vw;
          margin-right:40/7.5vw;
        }
        .del-img{
          width:35/7.5vw;
        }
        >span{
          line-height: 63/7vw;        
        }
      }
    }
    .circle-box{
      >div{
        width: 10/7.5vw;
        height: 10/7.5vw;
        background-color: #DFE0E6;
        border-radius: 50%;
        margin:8/7.5vw 50/7.5vw;
      }
    }
  }
  .trip-distance{
    height: 90/7.5vw;
    display: flex;
    align-items: center;
    background-color: #F2F4FA;
    >img{
      width: 36/7.5vw;
      margin:0 30/7.5vw 0 37/7.5vw;
    }
    span{
      font-size: 28/7.5vw;
      color: #949599;
    }
    p{
      font-size: 28/7.5vw;
      color: #0FD2B2;
    }
  }
}
</style>